<template>
  <div class="nav-bar">
    <div class="left">
      <router-link
       to="/home"
      >
         <van-icon
          name="wap-home-o"
          size="26px"
          />
      </router-link>
    </div>
    <div class="center-left">{{$route.meta.title}}</div>
    <div class="center-right">
      <router-link to="/search">
      <van-icon name="search" size="26px"/>
      </router-link>
      </div>
    <div class="right">
      <router-link
      to="/cart">
     <van-icon name="shopping-cart-o" badge="1"  size="26px"/>
     </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',

}
</script>

<style lang="less" scoped>
.nav-bar{
  height: 50px;
  width: 100%;
  div{
    display: inline-block;
    margin-top: 10px;
    margin-left: 15px;
  }
  .center-left{
    margin-left: 25%;
    margin-right: 18%;
  }
}
</style>
